<template>
	<div class="researchAnalysis" v-loading="researchAnalysisLoading">
		<div class="searchBox">
      <el-form ref="form" :model="searchForm" size="mini" inline>
        <el-row>
          <el-form-item label="水站名称">
            <el-select v-model="searchForm.waterstation" placeholder="请选择水站名称">
              <p v-for="(item, index) of stationList" :key="index">
                <el-option :label="item" :value="item"></el-option>
              </p>
            </el-select>
          </el-form-item>
          <el-form-item label="车辆编号" label-width="85px">
            <!-- <el-input v-model="searchForm.vehicle" placeholder="请输入车辆编号"></el-input> -->
            <el-select v-model="searchForm.vehicle" placeholder="请输入车辆编号">
              <p v-for="(item, index) of vehicleNumList" :key="index">
                <el-option :label="item.name" :value="item.name"></el-option>
              </p>
            </el-select>
          </el-form-item>
        </el-row>
        <el-row>
          <el-form-item label="监测时间">
            <el-col :span="11">
              <el-date-picker
                v-model="searchForm.starttime"
                type="date"
                style="width: 100%"
                :clearable="false"
                value-format="yyyy-MM-dd"
                placeholder="选择开始日期">
              </el-date-picker>
            </el-col>
            <el-col :span="2" class="line"> - </el-col>
            <el-col :span="11">
              <el-date-picker
                v-model="searchForm.lasttime"
                type="date"
                style="width: 100%"
                :clearable="false"
                value-format="yyyy-MM-dd"
                placeholder="选择结束日期">
              </el-date-picker>
            </el-col>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" class="greenBtn" size="mini" @click="onSubmit({pageSize: pageSize, pageNum: 1})">确定</el-button>
            <el-button type="primary" class="greenBtn" size="mini" @click="exportExcel">导出</el-button>
          </el-form-item>
        </el-row>
      </el-form>
    </div>
    <div class="overStandardChart">

      <div class="title">超标统计</div>

      <div class="chartBox">
        <div v-for="(item, index) of analysisData" :key="index" class="pieChartBox">
          <charts :option="pieConfig[index]"></charts>
        </div>
      </div>

    </div>
    <div class="dataAnalysis">
      <div class="title">数据分析</div>
      <el-table :data="analysisData" size="mini"
        style="width: 100%;" border
        :default-sort = "{prop: 'pollutantIndex', order: 'descending'}"
        @sort-change = "sortChange"
        :header-cell-style="{color: '#292929', background: '#f1f1f1'}"
      >
        <el-table-column
          prop="pollutantNumber"
          label="企业编号"
          align="center">
        </el-table-column>
        <el-table-column
          prop="pollutantName"
          label="企业名称"
          align="center">
        </el-table-column>
        <el-table-column
          prop="isExcess"
          label="是否超标"
          align="center">
          <template slot-scope="scope">
            <span :class="[scope.row.isExcess === '超标' ? 'TableWarnRed' : '']">{{scope.row.isExcess}}</span>
          </template>
        </el-table-column>
        <el-table-column
          prop="mainFactors"
          label="主要超标因子"
          align="center">
        </el-table-column>
        <el-table-column
          prop="excessStations"
          label="超标站点"
          width="170"
          align="center">
          <template slot-scope="scope">
            <span v-for="(item, index) of scope.row.excessStations" :key="index">
              {{item}}<br />
            </span>
            <!-- <span>{{scope.row.systemStatus ? '正常' : '异常'}}</span> -->
          </template>
        </el-table-column>
        
        <el-table-column
          prop="pollutionIndex"
          align="center"
          sortable
          width="200"
          :sort-orders = "['ascending', 'descending']"
          :label="'污染指数' + pollutantIndexLabel">
          <template slot-scope="scope">
            <span :class="[scope.row.pollutionIndex > standard.pollutionIndex ? 'TableWarnRed' : '']">{{scope.row.pollutionIndex}}</span>
          </template>
        </el-table-column>
        <el-table-column
          prop="waterInfo"
          label="水质状态"
          align="center">
        </el-table-column>
      </el-table> 
      <!-- <myPaging :func="pageUpdate" :total="0"></myPaging> -->
    </div>
	</div>
</template>
<script>
import charts from '../components/charts.vue'
import { mapActions, mapGetters } from 'vuex'
// import myPaging from '@/components/myPaging.vue'
import common from '@/plugins/common'
import standard from '../plugins/standard.js';
export default {
  name: 'researchAnalysis',
  data () {
    return {
      msg: 'hello researchAnalysis!',
      researchAnalysisLoading: false,
      searchForm: {
        waterstation: '',
        vehicle: '',
        starttime: '',
        lasttime: '',
        isExcel: 'no',
      },
      pieDefault: {
        color: ['#5ddeb7', '#ffb35f'],
        title: {
          // text: '企业1',
          bottom: 0,
          left: 'center', 
          textStyle: {
            fontSize: 14,
          }
        },
        tooltip: {
          trigger: 'item',
          formatter: "{a} <br/>{b}: ({d}%)"
        },
        series: [
          {
            // name: '企业1',
            type: 'pie',
            radius: ['40%', '50%'],
            avoidLabelOverlap: false,
            itemStyle: {
              borderWidth: 5,
              borderColor: '#fff',
            },
            labelLine: {
              length2: 8,
            },
            data: [
              // {
              //   value: 65, 
              //   name:'超标率',
              // },
              // {
              //   value: 35, 
              //   name:'达标率',
              // },
            ],
            label: {
              formatter: '{b}\n{d}%'
            },
          }
        ]
      },
      pieConfig: [],
      pollutantIndexLabel: '(从高到低)',

      standard
		}
  },
	methods: {
    ...mapActions([
      'getResearchAnalysis',
      'downAnalysisExcel'
    ]),
    async onSubmit(pageOption = {pageSize: this.pageSize, pageNum: 1}) {
      this.researchAnalysisLoading = true
      // debugger
      // await this.getResearchAnalysis({...this.searchForm, ...pageOption})
      await this.getResearchAnalysis(this.searchForm)
      this.configCharts()
      this.researchAnalysisLoading = false
    },
    // pageUpdate(option) {
    //   this.onSubmit(option)
    // },
    sortChange({ order }) {
      if(order === 'descending') {
        this.pollutantIndexLabel = '(从高到低)'
      }else if(order === 'ascending' ){
        this.pollutantIndexLabel = '(从低到高)'
      }
    },
    configCharts() {
      let analysisData = this.analysisData
      
      for(let i = 0; i < analysisData.length; i++) {
        let curData = analysisData[i]
        let pieConfig = this.pieConfig
        pieConfig[i] = common.deepClone(this.pieDefault)
        pieConfig[i].title.text = curData.pollutantName
        pieConfig[i].series[0].name = curData.pollutantName
        pieConfig[i].series[0].data = [
          {
            value: curData.exessRate, 
            name:'超标率',
          },
          {
            value: curData.achieve, 
            name:'达标率',
          },
        ]
      }
    },
    async exportExcel() {
      await this.onSubmit()
      const message = this.$message({
        message: '正在导出数据, 请稍后',
        duration: 0
      });
      this.searchForm.isExcel = 'yes'
      await this.downAnalysisExcel(this.searchForm)
      this.searchForm.isExcel = 'no'
      message.close()
    }
  },
  created() {
    this.searchForm.waterstation = this.stationList ? this.stationList[0] : '沙江4#'
    this.searchForm.starttime = common.changeDateToString(new Date(new Date().getTime() - 2592000000))
    this.searchForm.lasttime = common.changeDateToString(new Date()) 
    this.onSubmit()
  },
  mounted() {
    // this.pieDefault = {
    //   /**
    //    * 需要动态配置的选项
    //    * 
    //    * title.text
    //    * series[0].name
    //    * series[0].data
    //    * 
    //    */
    //   color: ['#5ddeb7', '#ffb35f'],
    //   title: {
    //     text: '企业1',
    //     bottom: 15,
    //     left: 'center', 
    //     textStyle: {
    //       fontSize: 14,
    //     }
    //   },
    //   tooltip: {
    //     trigger: 'item',
    //     formatter: "{a} <br/>{b}: ({d}%)"
    //   },
    //   series: [
    //     {
    //       name: '企业1',
    //       type: 'pie',
    //       radius: ['40%', '50%'],
    //       avoidLabelOverlap: false,
    //       itemStyle: {
    //         borderWidth: 5,
    //         borderColor: '#fff',
    //       },
    //       data: [
    //         {
    //           value: 65, 
    //           name:'超标率',
    //         },
    //         {
    //           value: 35, 
    //           name:'达标率',
    //         },
    //       ],
    //       label: {
    //         formatter: '{b}: \n{d}%'
    //       },
    //     }
    //   ]
    // }
  },
  computed: {
    ...mapGetters({
      stationList: 'getStationList',
      analysisData: 'getAnalysisData',
      vehicleNumList: 'getVehicleNumList',
      //分页依赖
      pageSize: 'getPageSize',
    })
  },
  components: {
    charts,
    // myPaging
  }
}
</script>
<style scoped>
.researchAnalysis {}

.researchAnalysis .title {
  position: relative;
  line-height: 70px;
  font-size: 16px;
}
.researchAnalysis .title::before {
  content: '';
  position: absolute;
  left: -15px;
  width: 4px;
  height: 20px;
  top: 25px;
  background-color: #2399ff;
}
.searchBox {
  background: #fff;
  padding: 20px 20px 0 20px;
}
.searchBox .line {
  text-align: center;
}
.overStandardChart {
  background: #fff;
  padding: 0 20px 20px 20px;
  margin-bottom: 15px;
}
.overStandardChart .title{
  left: 16px;
}
.overStandardChart .chartBox {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
}
.chartBox .pieChartBox {
  width: 25%;
  height: 220px;
}

.dataAnalysis {
  background: #fff;
  padding: 0 20px 20px 20px;
}
.dataAnalysis .title {
  left: 16px;
}

</style>
